<template>
  <div>
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="timetableQueryVo.courseName" placeholder="私课名称"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="timetableQueryVo.coachId" clearable placeholder="教练">
          <el-option
            v-for="coach in coachList"
            :key="coach.id"
            :label="coach.name"
            :value="coach.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item >
        <div class="block">
          <el-date-picker
            v-model="timetableQueryVo.classTime"
            type="daterange"
            start-placeholder="开课日期"
            end-placeholder="结课日期"
            value-format="yyyy-MM-dd"
            @change="dateFormat">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="primary" icon="el-icon-search" @click="resetData">清空</el-button>
    </el-form>

    <!--数据显示列表-->
    <el-table :data="timetableList" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          {{pageSize * (currentPage - 1) + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="courseName" label="名称" ></el-table-column>
      <el-table-column prop="coachName" label="教练" ></el-table-column>
      <el-table-column prop="gymName" label="场馆" ></el-table-column>
      <el-table-column prop="courseDate" label="排课日期" >
        <template slot-scope="scope">
          {{scope.row.startDate}} <p/>{{scope.row.endDate}}
        </template>
      </el-table-column>
      <el-table-column prop="courseTime" label="上课时间" >
        <template slot-scope="scope">
          {{scope.row.startTime}} <p/> {{scope.row.endTime}}
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="可预约人数" ></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleTimetableRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import coach from "../../api/coach";
  import privateTimetable from "../../api/privateTimetable";
  import privateCourses from "../../api/privateCourses";
  export default {
    data () {
      return {
        timetableQueryVo : {},
        coachList : {},
        timetableList : [],
        currentPage : 1,
        pageSize : 2,
        total : 10,
      }
    },
    created() {
      this.getCoach();
      this.getList();
    },
    methods : {
      //分页查询
      getList(value) {
        if (value == -1){
          // 点击搜索之后应该从第一页开始查询
          this.currentPage = 1;
        }
        console.log("查询数据：",this.timetableQueryVo)
        privateTimetable.findTimetable(this.currentPage, this.pageSize,this.timetableQueryVo).then(res => {
          console.log("页面初始化数据为：", res);
          this.timetableList = res.data.data;
          this.total = res.data.total;
        })
      },

      //时间数组转换成字符串
      dateFormat(picker){
        this.timetableQueryVo.startDate = picker[0].toString();
        this.timetableQueryVo.endDate = picker[1].toString();
      },
      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.getList();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.getList();
      },

      //清空条件查询表单数据
      resetData(){
        this.timetableQueryVo = {};
        this.currentPage = 1;
        this.getList();
      },
      handleTimetableAdd(){},
      handleToEdit(){},
      handleTimetableRemove(row){
        this.$confirm("是否确定删除数据？", "提示", {type: 'warning'})
          .then(() => {
            // 表示点击了确定
            console.log("被删除的id：",row.id)
            privateTimetable.deleteTimetable(row.id).then(res =>{
              // 此处我要不要考虑失败的情况
              // 弹出成功的提示信息
              this.$message.success(res.message);
              // 重新加载数据
              this.currentPage = 1;
              this.getList();
            });
          })
          .catch(() => {
            // 表示点击了取消
            this.$message.info("取消删除操作");
          });


      },

      //查询教练
      getCoach(){
        coach.queryAll().then(res => {
          console.log("查询教练数据：",res.data);
          this.coachList = res.data;
        })
      },
    }
  }
</script>
